import React, { useState } from 'react';
import './MaterialsPage.css';
import Plus from '../../../icons/Plus.svg';

const MaterialsPage = () => {
    const [lectures, setLectures] = useState([]);
    const [labs, setLabs] = useState([]);
    const [editMode, setEditMode] = useState(false);
    const [editIndex, setEditIndex] = useState(null);
    const [editType, setEditType] = useState('');
    const [newNumber, setNewNumber] = useState('');
    const [newName, setNewName] = useState('');
    const [file, setFile] = useState(null);
    const [showMaterialsGrid, setShowMaterialsGrid] = useState(true); // Состояние для отображения блока materials-grid

    const handleAdd = (type) => {
        setEditMode(true);
        setEditType(type);
        setShowMaterialsGrid(false); // Скрываем блок materials-grid
    };

    const handleSave = () => {
        if (!newName) {
            alert('Введите название');
            return;
        }
        if (!newNumber) {
            alert('Введите номер');
            return;
        }
        if (!file) {
            alert('Загрузите файл');
            return;
        }

        if (editType === 'lecture') {
            setLectures([...lectures, { name: newName, number: newNumber, file }]);
        } else if (editType === 'lab') {
            setLabs([...labs, { name: newName, number: newNumber, file }]);
        }
        setNewNumber('');
        setNewName('');
        setFile(null);
        setEditMode(false);
        setShowMaterialsGrid(true); // Показываем блок materials-grid после сохранения
    };

    const handleEdit = (index, type) => {
        setEditMode(true);
        setEditIndex(index);
        setEditType(type);
        setNewNumber(type === 'lecture' ? lectures[index].number : labs[index].number);
        setNewName(type === 'lecture' ? lectures[index].name : labs[index].name);
        setShowMaterialsGrid(false); // Скрываем блок materials-grid
    };

    const handleDelete = (index, type) => {
        if (type === 'lecture') {
            const updatedLectures = [...lectures];
            updatedLectures.splice(index, 1);
            setLectures(updatedLectures);
        } else if (type === 'lab') {
            const updatedLabs = [...labs];
            updatedLabs.splice(index, 1);
            setLabs(updatedLabs);
        }
        setShowMaterialsGrid(true); // Показываем блок materials-grid после удаления
        setEditMode(false); // Выключаем режим редактирования после удаления
        setNewNumber(''); // Очищаем номер
        setNewName(''); // Очищаем название
        setFile(null); // Очищаем файл
    };

    return (
        <div className="materials-page">
            {showMaterialsGrid && ( // Показываем блок materials-grid, если showMaterialsGrid равно true
                <div className="materials-grid">
                    <div className="left-block">
                        <h2>Лекции</h2>
                        {lectures.map((lecture, index) => (
                            <div key={index} onClick={() => handleEdit(index, 'lecture')} className="work-style">
                                {lecture.name}
                            </div>
                        ))}
                        {!editMode && <button className="add-button" onClick={() => handleAdd('lecture')}><img src={Plus} alt="Plus"/></button>}
                    </div>
                    <div className="right-block">
                        <h2>Практические работы</h2>
                        {labs.map((lab, index) => (
                            <div key={index} onClick={() => handleEdit(index, 'lab')} className="work-style">
                                {lab.name}
                            </div>
                        ))}
                        {!editMode &&
                            <button className="add-button" onClick={() => handleAdd('lab')}><img src={Plus} alt="Plus"/></button>}
                    </div>
                </div>
            )}
            {editMode && (
                <div className="edit-grid">
                    <div className="edit-block">
                        <div className="work-type">
                            <h2>{editIndex !== null ? `Редактирование ${editType === 'lecture' ? 'лекции' : 'практической работы'}` : `Добавление ${editType === 'lecture' ? 'лекции' : 'практической работы'}`}</h2>
                        </div>
                        <div className="input-row">
                            <input type="number" min="0" placeholder="Номер" value={newNumber}
                                   onChange={(e) => setNewNumber(e.target.value)} className="input-number"/>
                            <input type="text" placeholder="Введите название" value={newName}
                                   onChange={(e) => setNewName(e.target.value)} className="input-name"/>
                        </div>
                        <input type="file" accept=".doc,.docx,.ppt,.pptx" onChange={(e) => setFile(e.target.files[0])}/>
                        <button className="create" onClick={handleSave}>{editIndex !== null ? 'Сохранить' : 'Добавить'}</button>
                        <button className="create" onClick={() => {
                            setEditMode(false);
                            setShowMaterialsGrid(true);
                            setEditIndex(null); // Обнуляем индекс при отмене редактирования, чтобы в следующий раз корректно отобразить добавление
                        }}>Отмена
                        </button>
                        {/* Кнопка удаления */}
                        {editIndex !== null && (
                            <button className="delete-button"
                                    onClick={() => handleDelete(editIndex, editType)}>Удалить</button>
                        )}
                    </div>
                    <div className="edit-preview">
                        <div className="preview-block"><h2>Предпросмотр</h2></div>
                    </div>
                </div>
            )}
        </div>
    );
}

export default MaterialsPage;
